<template>
  <div class="seal-top">
    <div class="btn-return">
      <el-page-header icon="ArrowLeft" content="导出电子印章" @back="$router.push('/wel/index')"/>
    </div>
    <div class="btn-group" >
      <el-button @click="exportSeal()" type="info" >导出印章</el-button>
    </div>

  </div>
  <div class="basic-main" style="margin-top: 90px" v-loading="loading" element-loading-text="导出中，请稍等...">
    <el-form ref="antiFakeFormRef"
             :model="antiFakeForm"
             :rules="antiFakeFormRules"
             label-width="auto">
      <div class="card-item">
        <!--------------------------------------------------【导出说明】-------------------------------------------------->
        <div class="card-bg">
          <div class="card-header">
            <div class="card-header_title"><span>导出说明</span></div>
            <div class="card-header_content">
              <span class="card-header-content">（请详细说明导出印章的原由）</span>
            </div>
          </div>
          <div class="card-body">
            <div class="doc-wrapper new-doc-wrapper">
              <el-form-item label="导出说明" prop="antiFakeIntroduction">
                <el-input v-model="antiFakeForm.antiFakeIntroduction"
                          placeholder="请输入导出理由"
                          type="textarea"
                          style="width: 600px;"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <!--------------------------------------------------【防伪信息】-------------------------------------------------->
        <div class="card-bg">
          <div class="card-header"><div class="card-header_title"><span>防伪信息</span></div>
            <div class="card-header_content">
              <span class="card-header-content">（请牢记防伪识别码，该密码丢失则无法校验电子印章防伪信息）</span>
            </div>
          </div>
          <div class="card-body" >
            <el-form-item label="防伪识别码" prop="antiFakePassword">
              <el-input v-model.number="antiFakeForm.antiFakePassword"
                        placeholder="请输入4位防伪识别码"
                        style="width: 600px;"
                        maxlength="4"/>
            </el-form-item>
          </div>
        </div>

        <!--------------------------------------------------【任务参与人】-------------------------------------------------->
        <div class="card-bg">
          <div class="card-header">
            <div class="card-header_title"><span>选择电子印章</span></div>
            <div class="card-header_content">
              <span class="card-header-content">（只能导出自己创建的电子印章）</span>
            </div>
          </div>
          <div class="card-body">
            <div class="doc-wrapper new-doc-wrapper">
              <el-form-item prop="antiFakeSealTemplateId">
                <div v-for="item in sealForm" :key="item.uuid" class="seal-item">
                  <div @click="choseSeal(item.sealId)">
                    <div :class="item.sealId === sealChose ?'item-border__active':'item-border'">
                      <img :src="item.sealPath" >
                      <div class="seal_name">{{item.sealName}}</div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
    </el-form>

  </div>
</template>

<script setup>
import {ref,getCurrentInstance} from 'vue';
import {useStore} from 'vuex';
import '../../css/Sign/seal_use.css'
import {delSealApi, getSealByCreaterApi} from '../../api/seal';
import {exportAntiFakeSealApi} from '../../api/sealAntiFake';
import {ElMessage, ElMessageBox} from 'element-plus';
import { downloadPicture} from '../../utils/util';
const {proxy} = getCurrentInstance()

const store = useStore()
const userId = store.getters.userId

const antiFakeFormRef = ref(null)
/**
 * 防伪电子印章表单
 */
const antiFakeForm = ref({
  antiFakeUser: '',
  antiFakePassword: '',
  antiFakeSealTemplateId: '',
  antiFakeIntroduction: ''
})
const antiFakeFormRules = ref({
  antiFakeIntroduction: [{required: true,message: "请输入导出原由",trigger: 'blur'}],
  antiFakePassword: [{required: true,message: '请输入防伪识别码',trigger: 'blur'},
    { type: 'number', message: '请输入4位数字' }],
  antiFakeSealTemplateId: [{required: true,message: "请选择一个印章模板",trigger: 'blur'}],
})

/**
 * 获取我创建的印章数据
 */
const sealForm = ref([])

const getSealByCreater = () => {
  getSealByCreaterApi(userId,1,100).then(res=>{
    let data = res.data.result
    sealForm.value = data
  })
}
getSealByCreater()

/**
 * 获取选中的电子印章
 */
const sealChose = ref("")
const choseSeal = (sealId) => {
  sealChose.value = sealId
}


const loading = ref(false)
/**
 * 导出防伪电子印章
 */
const exportSeal = () => {
  antiFakeForm.value.antiFakeUser = userId
  antiFakeForm.value.antiFakeSealTemplateId = sealChose.value
  antiFakeFormRef.value.validate(valid =>{
    if(valid){
      ElMessageBox.confirm(
          '确认导出该印章吗?',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            loading.value = true
            exportAntiFakeSealApi(antiFakeForm.value)
                .then(res=>{
                  let data = res.data.result
                  let sealName = null;
                  for (let i=0;i<sealForm.value.length;i++){
                    if(sealForm.value[i].sealId === sealChose.value){
                      sealName = sealForm.value[i].sealName
                    }
                  }
                  const userName = store.getters.userInfo.username
                  let imageName = userName+"-"+sealName
                  loading.value = false
                  ElMessage.success("电子印章导出成功！")
                  downloadPicture(data,imageName)
                  proxy.$router.push("/wel/index");
                }).catch(res=>{
              loading.value = false
              ElMessage.error(res)
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消导出',
            })
          })

    }
  })
}
</script>

<style scoped>
.basic-main{
  margin-top: 30px;
  padding: 0 120px;
}
.card-item{
  margin-top: 10px;
}
.card-item .card-bg{
  display: inline-block;
  width: 100%;
  margin-top: 12px;
  -webkit-box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 2px 4px 0 rgb(0 0 0 / 6%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 2px 4px 0 rgb(0 0 0 / 6%);
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: all .15s ease;
  transition: all .15s ease;
  overflow: hidden;
}
.card-bg:hover{
  box-shadow: 2px 4px 7px rgb(0,0,0,.15);
}
.card-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 48px;
  line-height: 48px;
  padding: 0 24px;
  padding-right: 200px;
}
.card-header .card-header_title{
  height: 48px;
  line-height: 48px;
  display: inline-block;
}
.card-header .card-header_title span{vertical-align:middle}
.card-header .card-header_content{
  margin-left: 10px;
}
.card-header .card-header_content .card-header-content{
  font-size: 12px;
  color: #999;
}

.card-body{
  padding: 8px 24px 24px;
  overflow: hidden;
}

.doc-wrapper {
  margin-top: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: block;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.seal-item{
  width: 200px;
  margin-left: 2px;
  text-align: center;
  display: inline-block;
  /*border: 1px solid red;*/
  padding: 10px 0 0 10px;
  position: relative;
}
.seal-item .item-border{
  border: 1px solid #bebebe;
  text-align: center;
  cursor: pointer;
}
.seal-item .item-border:hover{
  border: 1px solid #0975e0;
}
.item-border__active{
  border: 1px solid #0975e0;
  cursor: pointer;
  -webkit-box-shadow: 0 0 12px 3px rgb(0 0 0 / 10%);
  box-shadow: 0 0 12px 3px rgb(0 0 0 / 10%);
  transition: all .2s;
}
.seal-item img{
  width: 200px;
  margin-left: 0;
}

.seal_name{
  position: absolute;
  top: 170px;
  width: 100%;
  margin: 0 0 0 -5px;
  text-align: center;
  font-size: 13px;
  color: #333;
}

/deep/ .upload-demo{
  display: flex;
  text-align: center;
  margin: 0 auto;
}
/deep/ .el-button--primary{
  background: none;
  color: #1063f1;
  border: none;
}
/deep/ .el-icon{
  padding-right: 5px;
  font-size: 20px;
}
.basic-btn{
  position: fixed;
  top: 110px;
  width: 100%;
  padding: 5px 0;
  background-color: #f0f2f5;
  z-index: 10;
}
/deep/ .el-button--info{
  width: 120px;
  margin: 0 20px;
  color: #fff;
  background-color: #1063f1;
  border-color: #1063f1;
  font-size: 15px;
}
/deep/ .el-button--info:hover{
  background-color: #0082FF;
  border-color: #0082FF;
}

/deep/ .el-button--info.is-plain{
  width: 120px;
  margin: 0 20px;
  color: #1063f1;
  background-color:#ecf5ff;
  border-color:#1063f1;
  font-size: 15px;
}
/deep/ .el-button--info.is-plain:hover{
  background-color:#1063f1;
  color: #fff;
}
</style>
